<script setup>
	import {
		HomeFilled,
		Goods,
		ChromeFilled,
		UserFilled,
		Top
	} from "@element-plus/icons-vue";
	import {onMounted,watch,ref} from "vue"

	// 回到顶部
	function scolltop(){
		console.log(111)
		window.scrollTo(0,0)
	}

	// 侧边栏固定，当滚动的高度离上面400px、离下面400px时出现，出现滚动条
	let isShow=ref(true)
	let scrollHandle=()=>{
		let distance=document.documentElement.scrolltop
		console.log(distance)
	}
	let scrollTop=ref(null) 
	let scrollHeight=ref(null)
	onMounted(()=>{
		window.addEventListener("scroll",()=>{
		if((document.documentElement.scrollHeight-scrollTop.value-280-360-50>=0)){
				isShow.value=true
			}
			else{
				isShow.value=false
			}
			// if(){}
			scrollTop.value=window.pageYOffset || document.body.scrollTop||document.documentElement.scrollTop
			scrollHeight.value=window.innerHeight
		})
	})
</script>


<template>
	<div class="aside " v-if="isShow">
		<ul>
			<li>
				<el-icon>
					<HomeFilled />
				</el-icon>
				<span>首页</span>
			</li>
			<li>
				<el-icon>
					<Goods />
				</el-icon>
				<span>商品</span>
			</li>
			<li>
				<el-icon>
					<ChromeFilled />
				</el-icon>
				<span>圈子</span>
			</li>
			<li>
				<el-icon>
					<UserFilled />
				</el-icon>
				<span>个人中心</span>
			</li>
		</ul>
	</div>
	<div class="backTop pulse" v-on:click="scolltop" v-if="isShow">
		<el-icon :size="30" color="#fff" style="vertical-align: middle;padding-top: 10px;" ><Top /></el-icon>
	</div>
</template>


<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
		&:hover{
					cursor:pointer;
					color:#4f60d3;
				}
	}

	.aside {
		position: fixed;
		z-index: 1;
		width: 120px;
		height: 280px;
		font-size: 14px;
		background-color: #cc94cc;
		margin-left: 50px;
		top: 20vh;
		border-radius: 20px;
		li {
			padding: 25px 10px;

			span {
				padding-left: 5px;
			}
		}

	}
	.backTop{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		text-align: center;
		background-color: #cc94cc;
		position: fixed;
		right: 50px;
		bottom: 30vh;
	}


	// 按钮的动画
	.pulse{
		animation-name: pulse;
		-webkit-animation-name: pulse;	
	
		animation-duration: 1.5s;	
		-webkit-animation-duration: 1.5s;
	
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		
	}
	
	@keyframes pulse {
		0% {
			transform: scale(0.9);
			opacity: 0.7;		
		}
		50% {
			transform: scale(1);
			opacity: 1;	
		}	
		100% {
			transform: scale(0.9);
			opacity: 0.7;	
		}			
	}
</style>
